<template>
  <div class="users">
    <el-tabs v-model="activeNamew" @tab-click="stepzx" class="utbsa">
      <el-tab-pane label="基础用户" name="first">
        <div class="userzxx">
          <div class="scwj">
            <div class="item_bock flex flex_x_center">
              <label>
                <img :src="imgUrl" style="width: 100px" />
                <input
                  type="file"
                  accept="image/*"
                  @change="handleFile"
                  class="hiddenInput"
                />
              </label>
            </div>
          </div>
          <div class="sctt" @click="getVidsubm222()">
            <el-button type="primary">上传logo</el-button>
          </div>
          <div class="userz1">
            <div>
              <span>基础信息</span>
              <div class="basex">
                <div>
                  <span class="lab">登录名:</span
                  ><span class="sz">{{ baseUser.username }}</span>
                </div>
                <div>
                  <span class="lab">注册时间:</span
                  ><span class="sz">{{ baseUser.createTime }}</span>
                </div>
                <div>
                  <span class="lab">上次登录时间:</span
                  ><span class="sz">{{ baseUser.loginTime }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="xt"></div>
          <div class="userz2">
            <div>
              <span class="dl">登录密码</span>
              <span class="hs"
                >密码用于平台登录，建议使用高强度密码，并定时更新密码</span
              >
            </div>
            <div class="yybj">
              <div class="hsbj">
                <div
                  v-show="pso"
                  style="
                    display: inline-flex;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 5%;
                  "
                >
                  <div>当前密码强度</div>
                  <el-progress
                    :percentage="50"
                    :format="format"
                    style="margin-left: 10px"
                  ></el-progress>
                </div>
                <div style="float: right; margin-top: 18px; margin-right: 49px">
                  <el-button type="primary" @click="xiugai">修改</el-button>
                </div>
              </div>
              <div class="xgmm" v-show="see">
                <el-form
                  class="user-account-key"
                  ref="rulemm"
                  :model="rulemm"
                  :rules="rules"
                  label-width="100px"
                >
                  <el-form-item
                    label="原密码"
                    prop="oldPassword"
                    style="width: 300px"
                  >
                    <el-input
                      type="password"
                      placeholder="请输入原密码"
                      v-model="rulemm.oldPassword"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="新密码"
                    prop="newPassword"
                    style="width: 300px"
                  >
                    <el-input
                      type="password"
                      placeholder="请设置新密码"
                      v-model="rulemm.newPassword"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="确认密码"
                    prop="sNewPassword"
                    style="width: 300px"
                  >
                    <el-input
                      type="password"
                      placeholder="请确认新密码"
                      v-model="rulemm.sNewPassword"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitFormps('rulemm')"
                      >确认修改</el-button
                    >
                    <el-button type="primary" @click="qux()">取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="xt"></div>
          <div class="userz3">
            <div>
              <span class="dl">手机号码</span>
              <span class="hs"
                >手机号码用于收取消息通知及找回密码，建议使用常用手机号码，以便及时获取信息</span
              >
            </div>
            <div class="photo">
              <div class="haoma">
                <span v-show="pso2">{{ baseUser.phone }}</span>
                <div style="float: right; margin-top: 28px; margin-right: 49px">
                  <el-button type="primary" @click="xiugai2">修改</el-button>
                </div>
              </div>
              <div class="xgmm2" v-show="see2">
                <el-form
                  :model="formphone"
                  status-icon
                  :rules="rules"
                  ref="formphone"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item
                    label="安全验证:"
                    prop="oldPhone"
                    style="width: 400px"
                  >
                    <el-input
                      type="text"
                      clearable
                      v-model="formphone.oldPhone"
                      :disabled="true"
                    >
                      <template slot="append"
                        ><span
                          v-show="show2"
                          @click="yanzm"
                          style="cursor: pointer; color: #157ef4"
                          >获取验证码</span
                        >
                        <span v-show="!show2" class="count"
                          >{{ count2 }} s</span
                        >
                      </template>
                    </el-input>
                  </el-form-item>
                  <!-- <el-form-item label="安全验证:" prop="oldPhone">
                      <el-input v-model="formphone.oldPhone"></el-input>
                    </el-form-item> -->
                  <el-form-item label="" prop="oldCode" style="width: 400px">
                    <el-input
                      placeholder="请输入验证码"
                      v-model="formphone.oldCode"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="" prop="newPhone" style="width: 400px">
                    <el-input
                      placeholder="请输入新的手机号码"
                      v-model="formphone.newPhone"
                    >
                      <template slot="append"
                        ><span
                          v-show="show3"
                          @click="yanzm2"
                          style="cursor: pointer; color: #157ef4"
                          >获取验证码</span
                        >
                        <span v-show="!show3" class="count"
                          >{{ count3 }} s</span
                        >
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="newCode" style="width: 400px">
                    <el-input
                      placeholder="请输入验证码"
                      v-model="formphone.newCode"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="submitFormyzm('formphone')"
                      >确认修改</el-button
                    >
                    <el-button type="primary" @click="qux2()">取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="xt"></div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="平台合约" name="second"> 合约</el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import {
  creatzhanghugl,
  smps,
  ymzs,
  checkCode,
  uploadAvatar,
} from "@/api/leagues/app";
import qs from "qs";
export default {
  data() {
    let validateNewPassword = (rule, value, callback) => {
      if (value === this.rulemm.oldPassword) {
        callback(new Error("新密码不能与原密码相同!"));
      } else {
        callback();
      }
    };
    //此处即表单发送之前验证  验证新密码与再次确认
    let validateNewPassword2 = (rule, value, callback) => {
      if (value !== this.rulemm.newPassword) {
        callback(new Error("与新密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      show2: true,
      count2: "",
      timer2: null,
      show3: true,
      count3: "",
      timer3: null,
      show4: true,
      count4: "",
      timer4: null,
      activeNamew: "first",
      see: false,
      see2: false,
      baseUser: {},
      pso: true,
      pso2: true,
      rulemm: {
        oldPassword: "",
        newPassword: "",
        sNewPassword: "",
      },
      imgUrl: require("../../assets/logo2.png"),
      formphone: {
        oldPhone: "",
        oldCode: "",
        newPhone: "",
        newCode: "",
        check: 0,
      },
      rules: {
        //验证规则
        oldPassword: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "请设置新密码",
            trigger: "blur",
          },
          {
            validator: validateNewPassword,
            trigger: "blur",
          },
        ],
        sNewPassword: [
          {
            required: true,
            message: "请确认新密码",
            trigger: "blur",
          },
          {
            validator: validateNewPassword2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.zhanghugl();
  },
  methods: {
    stepzx() {},
    //基本信息
    zhanghugl: function () {
      var that = this;
      creatzhanghugl()
        .then((data) => {
          // that.$message.success("查询成功");
          this.baseUser = data.data.data;
          this.percentage = parseInt(data.data.data.complex);
          this.formphone.oldPhone = this.baseUser.phone;
          // that.$message({
          //   duration: 600,
          //   message: "查询成功",
          //   type: "success",
          // });
          this.stepzt();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    format(percentage) {
      if (percentage < 40) {
        percentage = "低";
      } else if (percentage < 80) {
        percentage = "中";
      } else if (percentage < 100) {
        percentage = "高";
      }
      return percentage;
    },
    //修改密码
    xiugai() {
      (this.see = true), (this.pso = false);
    },
    //修改手机
    xiugai2() {
      (this.see2 = true), (this.pso2 = false);
    },
    //取消
    qux() {
      (this.see = false), (this.pso = true);
    },
    //取消
    qux2() {
      (this.see2 = false), (this.pso2 = true);
    },

    //密码修改
    submitFormps(rulemm) {
      var that = this;
      this.$refs[rulemm].validate((valid) => {
        if (valid) {
          let password = that.rulemm.newPassword;
          let reg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/;
          if (reg.test(password)) {
            that.$message(
              "密码必须是大写字母，小写字母，数字，特殊字符组成，且长度为8到12位！"
            );
          }
          smps(that.rulemm).then((data) => {
            if (data.data.code == 0) {
              that.$message.success(data.data.msg);
              this.qux();
            } else if (data.data.code == 1) {
              that.$message.error(data.data.msg);
            }
            // that.$message({
            //   duration: 600,
            //   message: "查询成功",
            //   type: "success",
            // });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //密码修改
    submitFormyzm(formphone) {
      var that = this;
      this.$refs[formphone].validate((valid) => {
        if (valid) {
          ymzs(that.formphone).then((data) => {
            if (data.data.code == 0) {
              this.formphone.newPhone ="";
              this.formphone.oldCode="";
              this.formphone.newCode=""
              this.qux2();

              that.$message.success(data.data.msg);
            } else if (data.data.code == 1) {
              this.qux2();
              that.$message.error(data.data.msg);
            }
            // that.$message({
            //   duration: 600,
            //   message: "查询成功",
            //   type: "success",
            // });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取验证码
    yanzm() {
      let obj = {
        phone: this.formphone.oldPhone,
        isNew: "0",
      };
      debugger
      this.$fetch("/admin/user/getCode?" + qs.stringify(obj)).then((res) => {
        if (res) {
          this.formphone.oldCode = res.data;
          const TIME_COUNT2 = 60;
          if (!this.timer2) {
            this.count2 = TIME_COUNT2;
            this.show2 = false;
            this.timer2 = setInterval(() => {
              if (this.count2 > 0 && this.count2 <= TIME_COUNT2) {
                this.count2--;
              } else {
                this.show2 = true;
                clearInterval(this.timer2);
                this.timer2 = null;
              }
            }, 700);
          }
        }
      });
    },
    //验证验证码

    yanzm3() {
      debugger
      let obj3 = {
        phone: this.formrenz.phone,
        isNew: "0",
      };
      this.$fetch("/admin/user/getCode?" + qs.stringify(obj3)).then((res) => {
        if (res) {
          this.formrenz.code = res.data;
          // this.$message.success(res.msg);
          const TIME_COUNT3 = 60;
          if (!this.timer3) {
            this.count3 = TIME_COUNT3;
            this.show3 = false;
            this.timer3 = setInterval(() => {
              if (this.count3 > 0 && this.count3 <= TIME_COUNT3) {
                this.count3--;
              } else {
                this.show3 = true;
                clearInterval(this.timer3);
                this.timer3 = null;
              }
            }, 700);
          }
          console.log(res, +"333");

          checkCode(this.formrenz).then((data) => {
            // this.$message.success(data.data.msg);
          });
        }
      });
    },
    //获取验证码
    yanzm2() {
      debugger
      let obj2 = {
        phone: this.formphone.newPhone,
        isNew: "1",
      };
      this.$fetch("/admin/user/getCode?" + qs.stringify(obj2)).then((res) => {
        if (res) {
          this.formphone.newCode = res.data;
          const TIME_COUNT3 = 60;
          if (!this.timer3) {
            this.count3 = TIME_COUNT3;
            this.show3 = false;
            this.timer3 = setInterval(() => {
              if (this.count3 > 0 && this.count3 <= TIME_COUNT3) {
                this.count3--;
              } else {
                this.show3 = true;
                clearInterval(this.timer3);
                this.timer3 = null;
              }
            }, 700);
          }
        }
      });
    },
    // 将头像显示

    uploadHeadImg: function () {
      this.$el.querySelector(".hiddenInput").click();
    },
    handleFile: function (e) {
      let $target = e.target || e.srcElement;
      this.file = $target.files[0];
      console.log(this.file, "file");
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.imgUrl = res.result;
      };
      reader.readAsDataURL(this.file);
      // let files = new FormData(e. target. files[0] );
    },

    getVidsubm222() {
      var that = this;
      uploadAvatar(that.file)
        .then((data) => {
          if ((data.code = 0)) {
            ///    that.$message.success("上传成功");
            that.$message({
              duration: 600,
              message: data.data.msg,
              type: "success",
            });
            //  that.refreshChange()
          } else if ((data.code = 1)) {
            that.$message({
              duration: 600,
              message: data.data.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.userzxx {
  width: 1200px;
  /* height: 740px; */
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.userz1 span {
  width: 71px;
  height: 17px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 60px;
  width: 125px;
  margin-left: 52px;
}
.xt {
  width: 1100px;
  height: 84px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 1px 0px 0px #e6e6e6;
  margin-left: 50px;
}
.userz2 {
  margin-top: 20px;
  margin-bottom: -30px;
}
.yybj {
  width: 1061px;

  background: #f8f9fa;
  border-radius: 6px;
  margin-left: 77px;
}
.basex {
  height: 94px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #586279;
  line-height: 40px;
  opacity: 0.8;
  margin: 11px;
}
.hs {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b8c5ce;
  line-height: 25px;
  opacity: 0.8;
}
.dl {
  height: 17px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 60px;
  margin-left: 52px;
}
.lab {
  text-align: right;
  vertical-align: middle;
  float: left;
}
.sz {
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
}
.hsbj {
  height: 100px;
}
.xgmm {
  margin: 34px;
  padding-bottom: 10px;
}
.userz3 {
  margin-top: 20px;
}
.photo {
  width: 1061px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-left: 77px;
}
.haoma {
  height: 100px;
}
.haoma span {
  position: absolute;
  margin-top: 36px;
  margin-left: 65px;
}
.xgmm2 {
  margin: 34px;
  padding-bottom: 10px;
}
.utbsa {
  /* width: 470px; */
  height: 40px;

  margin: 0 auto;
}

>>> .el-form-item__label {
  color: #586279;
  font-size: 14px;
}
>>> .el-step__title.is-success {
  color: #0075ff;
}
>>> .el-step__head.is-success {
  color: #0075ff;
  border-color: #0075ff;
}
.sz {
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
}
.scwj {
  float: right;
  margin-top: 68px;
  margin-right: 415px;
}
>>> .el-tabs__nav {
  /* width: 311px; */
  height: 40px;
  border-radius: 20px;
  text-align: center;
}
>>> .el-tabs__content {
  margin-top: 11px;
}
/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
>>> .el-tabs__active-bar {
  background-color: transparent !important;
}
>>> .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}
>>> .el-tabs__header {
  margin: 0 auto !important;
  width: 1200px;
  background: #ffffff;
  border-radius: 20px;
}
>>> .el-step.is-horizontal .el-step__line {
  border-top: 2px dashed #ccd1de;
  height: 0;
  background-color: transparent;
}
.item_bock .hiddenInput {
  /* display: none; */
  opacity: 0;
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 10;
  bottom: 100px;
}
.sctt {
  position: absolute;
  right: 0;
  margin-right: 415px;
  margin-top: 177px;
  cursor: pointer;
  z-index: 10;
}
>>> .el-step.is-center .el-step__line {
  top: 50%;
}
>>> .el-step__icon.is-text {
  width: 47px;
  height: 47px;
}
>>> .el-tabs__nav {
  width: 311px;
  height: 40px;
  background: transparent !important;
  border-radius: 20px;
  text-align: center;
}
.el-progress {
  width: 297px;
}
>>> .el-progress-bar__inner {
  background-color: #48dc76 !important;
}
>>> .el-tabs__item.is-active {
  background: #0075ff;
  box-shadow: 0px 3px 8px 0px rgba(0, 117, 255, 0.2);
  border-radius: 20px;
}
>>> .el-tabs__item {
  width: 150px;
  height: 40px;
  color: #8995ad;
}
>>> .el-tabs__item.is-active {
  color: #ffffff;
}
</style>